<div class="modal-header">
  <h5 class="modal-title">选择商品</h5>
  <button type="button" class="btn-close" aria-label="关闭" (click)="cancel()"></button>
</div>
<div class="modal-body">
  <!-- 查询表单 -->
  <form class="row g-2 mb-2 align-items-center" (ngSubmit)="search()">
    <div class="col" *ngFor="let field of [
      {key: 'sku', label: 'SKU'},
      {key: 'productName', label: '商品名'},
      {key: 'barcode', label: '条码'},
      {key: 'specification', label: '规格'},
      {key: 'brand', label: '品牌'}
    ]">
      <input type="text" class="form-control" style="min-width:120px;max-width:180px;" [(ngModel)]="filter[field.key]" [name]="field.key" [placeholder]="field.label">
    </div>
    <div class="col-auto d-flex gap-2">
      <button type="submit" class="btn btn-primary btn-sm">查询</button>
      <button type="button" class="btn btn-secondary btn-sm" (click)="reset()">重置</button>
    </div>
  </form>
  <!-- 表格 -->
  <div class="table-responsive" style="max-height: 400px; overflow: auto;">
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>选择</th>
          <th>货主</th>
          <th>商品</th>
          <th>SKU</th>
          <th>商品名</th>
          <th>单位</th>
          <th>温层</th>
          <th>条码</th>
          <th>规格</th>
          <th>品牌</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of goods" (click)="select(item)" [class.table-active]="item === selected">
          <td>
            <input type="radio" [checked]="item === selected" (click)="$event.stopPropagation(); select(item)">
          </td>
          <td>{{item.ownerCode}}</td>
          <td>{{item.productCode}}</td>
          <td>{{item.sku}}</td>
          <td>{{item.productName}}</td>
          <td>{{item.unit}}</td>
          <td>{{item.temperatureZone}}</td>
          <td>{{item.barcode}}</td>
          <td>{{item.specification}}</td>
          <td>{{item.brand}}</td>
        </tr>
        <tr *ngIf="!goods.length">
          <td colspan="10" class="text-center">暂无数据</td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- 分页（可选） -->
  <div class="d-flex justify-content-between align-items-center mt-2">
    <span>共 {{totalCount}} 条</span>
    <nav *ngIf="totalCount > pageSize">
      <ul class="pagination pagination-sm mb-0">
        <li class="page-item" [class.disabled]="page === 1">
          <a class="page-link" (click)="onPageChange(page - 1)" href="javascript:void(0)">上一页</a>
        </li>
        <li class="page-item" [class.disabled]="page * pageSize >= totalCount">
          <a class="page-link" (click)="onPageChange(page + 1)" href="javascript:void(0)">下一页</a>
        </li>
      </ul>
    </nav>
  </div>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" (click)="cancel()">取消</button>
  <button type="button" class="btn btn-primary" (click)="confirm()" [disabled]="!selected">确定</button>
</div>
